import React, { Component } from 'react'
import {
  Text,
  StyleSheet,
  View,
  Image,
  ScrollView,
} from 'react-native'

import NavBar from '../../../../components/PublicHeader'

import {
  socialEllipsis
} from '../../../../utils/publicMethodList';

export default class promotionProgress extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topTitle: "推广进度",
      // 推广进度数据列表
      promotionProgress: {
        // 社圈推广信息
        informationArea: [
          {
            promotionTitle: "推广中",
            progressNumber: "100",
            exhibitionTitle: "小区门口，芙蓉超市盛大开",
            exhibitionName: "小何同学投放",
            socialLeftImage: '',
          }
        ],
        // 实时数据区
        timeDataTitle: [
          {
            rtealTimeAreaTitle: "实时数据",
            exposureText: "曝光量",
            exposureNumber: "176",
            newConversionText: "新增转化量",
            newConversionIcon: require('../../../../assets/images/iconResources/newConversion.png'),
            exposureIcon: require('../../../../assets/images/iconResources/exposure.png'),
            newConverData: [
              {
                itemNumber: "176",
                itemText: "点赞数"
              },
              {
                itemNumber: "176",
                itemText: "评论数"
              },
              {
                itemNumber: "176",
                itemText: "阅读量"
              }
            ],
          }
        ],
        // 推广者 / 支付详情
        newConversionList: [
          {
            itemTitle: "推广者",
            itemText: "小何同学",
          },
          {
            itemTitle: "支付方式",
            itemText: "微信支付",
          },
          {
            itemTitle: "订单金额",
            itemText: "100",
          },
          {
            itemTitle: "支付金额",
            itemText: "100",
          }
        ]
      },
    }
  }

  componentDidMount = () => {
  }

  render() {
    const {
      topTitle,
      promotionProgress
    } = this.state
    {/* 推广进度信息 */ }
    const ProgressAreaBox =
      <>
        {promotionProgress.informationArea.map((item, index) => (
          <View style={styles.publicStyle}
            key={index}>
            {/* 信息标题 */}
            <Text style={styles.promotionTitle}>
              {item.promotionTitle}
            </Text>
            {/* 进度条区 */}
            <View style={styles.progressAreaBox}>
              <Text style={styles.displayAreaText}>
                推广进度:{item.progressNumber}%
              </Text>
              {/* 进度条暂时模拟 */}
              <View style={styles.areaProgressBar}></View>
            </View>
            {/* 社圈信息展示 */}
            <View style={styles.exhibitionAreaRow}>
              <Image
                style={styles.socialLeftImage}
                source={item.socialLeftImage}
              />
              <View style={styles.information}>
                {/* 标题超出时显示省略符 */}
                <Text style={styles.exhibitionTitle}>
                  {socialEllipsis(item.exhibitionTitle)}
                </Text>
                <Text style={styles.exhibitionName}>
                  {item.exhibitionName}
                </Text>
              </View>
            </View>
          </View>
        ))
        }
      </>
    {/* 实时数据区 */ }
    const RtealTimeDataAreaBox =
      <>
        {promotionProgress.timeDataTitle.map((item, index) => (
          <View style={styles.publicStyle}
            key={index}>
            {/* 实时数据标题 */}
            <Text style={styles.timeDataTitle}>
              {item.rtealTimeAreaTitle}
            </Text>
            {/* 详情数据展示 */}
            <View style={styles.exposureBox}>
              <View style={styles.exposureLeft}>
                <Image
                  style={styles.exposureIcon}
                  source={item.exposureIcon}
                />
                {/* 曝光量 */}
                <Text style={styles.exposureText}>
                  {item.exposureText}
                </Text>
              </View>
              <Text style={styles.exposureNumber}>
                {item.exposureNumber}
              </Text>
            </View>
            <View style={styles.newConversionBox}>
              <View style={styles.newConversionLeft}>
                <Image
                  style={styles.newConversionIcon}
                  source={item.newConversionIcon}
                />
                {/* 新增转化量 */}
                <Text style={styles.newConversionText}>
                  {item.newConversionText}
                </Text>
              </View>
              {/* 新增转化量数据列表 */}
              <View style={styles.newConversionList}>
                {item.newConverData.map((item, index) => (
                  <View style={styles.newConverData}
                    key={index}>
                    <Text style={styles.newConversionNumber}>
                      {item.itemNumber}
                    </Text>
                    <Text style={styles.newConversionText}>
                      {item.itemText}
                    </Text>
                  </View>
                ))}
              </View>
            </View>
          </View>
        ))}
      </>
    {/* 推广者 / 支付详情 */ }
    const PromoterPaymentBox =
      <View style={styles.publicStyle}>
        <View style={styles.promoterPaymentBox}>
          {promotionProgress.newConversionList.map((item, index) => (
            // 推广者 / 支付方式
            <View style={styles.promoterItem}
              key={index}>
              <Text style={styles.promoterTitle}>
                {item.itemTitle}
              </Text>
              <Text style={styles.promoterText}>
                {item.itemText == "100" ?
                  "￥" + item.itemText : item.itemText}
              </Text>
            </View>
          ))}
        </View>
      </View>
    {/* 再次推广按钮 */ }
    const PromoteButtonAgain =
      <View style={styles.promoteButtonAgain}>
        <Text style={styles.promoteTextAgain}>再次推广</Text>
      </View>
    return (
      <View style={styles.progressBox} >
        {/* 导航栏 */}
        < NavBar
          navigation={this.props.navigation}
          title={topTitle}
          titleColor={"#333"}
          style={{ backgroundColor: "#fff" }}
        />
        < ScrollView >
          <View style={styles.warperPromotion}>
            {/* 推广进度信息 */}
            {ProgressAreaBox}
            {/* 实时数据区 */}
            {RtealTimeDataAreaBox}
            {/* 推广者 支付详情 */}
            {PromoterPaymentBox}
            {/* 再次推广按钮 */}
            {PromoteButtonAgain}
          </View>
        </ScrollView >
      </View >
    )
  }
}

const styles = StyleSheet.create({
  progressBox: {
    flex: 1,
    backgroundColor: "rgb(245,245,245)"
  },
  warperPromotion: {
    paddingLeft: 15,
    paddingTop: 15,
    paddingRight: 15,
    marginBottom: 30
  },
  publicStyle: {
    padding: 15,
    backgroundColor: "#fff",
    borderRadius: 10,
    marginBottom: 10
  },
  promotionTitle: {
    color: "#000",
    fontSize: 20,
    marginBottom: 10
  },
  timeDataTitle: {
    color: "#000",
    fontSize: 20
  },
  exposureBox: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 20,
    marginBottom: 20
  },
  newConversionBox: {
    marginBottom: 10
  },
  exposureLeft: {
    flexDirection: "row"
  },
  newConversionLeft: {
    flexDirection: "row"
  },
  exposureIcon: {
    marginRight: 10,
    width: 20,
    height: 20
  },
  exposureText: {
    color: "#333",
    fontSize: 16
  },
  exposureNumber: {
    color: "#333",
    fontSize: 16
  },
  newConversionIcon: {
    width: 20,
    height: 20,
    marginRight: 10,
    marginBottom: 20
  },
  newConversionText: {
    color: "#333",
    fontSize: 16
  },
  newConversionList: {
    flexDirection: "row",
    justifyContent: "space-around"
  },
  newConverData: {
    flexDirection: "column",
    alignItems: "center"
  },
  newConversionNumber: {
    color: "#333",
    fontSize: 20,
    marginBottom: 5
  },
  newConversionText: {
    color: "#999"
  },
  promoterItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 16
  },
  promoterTitle: {
    color: "#333",
    fontSize: 16
  },
  promoterText: {
    color: "#999",
    fontSize: 16
  },
  progressAreaBox: {
    marginBottom: 10
  },
  displayAreaText: {
    color: "#333",
    fontSize: 12,
    marginBottom: 10
  },
  areaProgressBar: {
    width: "100%",
    height: 5,
    borderRadius: 2,
    backgroundColor: "red"
  },
  exhibitionAreaRow: {
    flexDirection: "row",
    marginTop: 10
  },
  socialLeftImage: {
    width: 60,
    height: 60,
    borderRadius: 5,
    marginRight: 10
  },
  information: {
    flexDirection: "column",
    justifyContent: "space-around"
  },
  exhibitionTitle: {
    fontSize: 17,
    color: "#333",
  },
  exhibitionName: {
    fontSize: 14,
    color: "#999"
  },
  promoteButtonAgain: {
    width: "100%",
    height: 40,
    borderRadius: 20,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#1890FF",
    marginTop: 30
  },
  promoteTextAgain: {
    color: "#fff",
    fontSize: 18,
    fontWeight: "700"
  },
})
